<template>
  <div class="freight">
    <el-card>
      <el-button class="addBtn" @click="handleDialog">新增模块</el-button>
      <el-table :data="list" border style="width: 100%" stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
        <el-table-column prop="templateType" label="模板类型">
          <template #default="{row}">
            <span>{{ setMap.templateType[row.templateType] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型">
          <template #default="{row}">
            <span>{{ setMap.transportType[row.transportType] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市">
          <template #default="{row}">
            <span>{{ setMap.associatedCityList[row.associatedCityList] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重" />
        <el-table-column prop="continuousWeight" label="续重" />
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数" />
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <a href="javascript:void(0);" style="color:#419eff;">编辑</a>
            <div class="line" />
            <a href="javascript:void(0);" style="color:#f56c6c;" @click="delModule(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹层 -->
    <el-dialog title="新增模板" :visible.sync="showDialog">
      <el-form ref="formData" label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="formData.templateType" placeholder="请选择模板信息" style="width:100%">
            <el-option
              v-for="(item,index) in Object.keys(setMap.templateType)"
              :key="index"
              :label="setMap.templateType[item]"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="formData.transportType" placeholder="请选择运送类型" style="width:100%">
            <el-option label="普快" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <el-radio-group v-if="formData.templateType==='3'" v-model="associatedCityList">
            <el-radio
              v-for="(item,index) in Object.keys(setMap.associatedCityList).filter(element=>element !== '1')"
              :key="index"
              :label="item"
            >{{ setMap.associatedCityList[item] }}</el-radio>
          </el-radio-group>
          <span v-else>全国</span>
        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model.number="formData.firstWeight" placeholder="请输入首重价格" />
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model.number="formData.continuousWeight" placeholder="请输入续重价格" />
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="formData.lightThrowingCoefficient" placeholder="请输入轻抛系数" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import setMap from '@/constant/setMap.js'
import { addModuleApi, delModuleApi, initCarriages } from '@/api/freight'
export default {
  data() {
    return {
      list: [],
      setMap,
      associatedCityList: [],
      formData: {
        'continuousWeight': 0,
        'firstWeight': 0,
        'lightThrowingCoefficient': 0,
        'templateType': '',
        'transportType': ''
      },
      rules: {
        continuousWeight: [{ required: true, message: '不能为空', trigger: 'blur' }],
        firstWeight: [{ required: true, message: '不能为空', trigger: 'blur' }],
        lightThrowingCoefficient: [{ required: true, message: '不能为空', trigger: 'blur' }],
        templateType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        transportType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        associatedCityList: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  created() {
    this.getCarriages()
  },
  methods: {
    async getCarriages() {
      const res = await initCarriages()
      // console.log(res)
      this.list = res
    },
    handleDialog(id) {
      this.showDialog = true
    },
    // 添加模块
    async submit() {
      await this.$refs.formData.validate()
      await addModuleApi({ ...this.formData, associatedCityList: [this.associatedCityList] })
      this.getCarriages()
      this.close()
    },
    // 删除
    async delModule(id) {
      await this.$confirm('确认删除吗？')
      await delModuleApi(id)
      this.getCarriages()
    },
    // close
    close() {
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.freight{
  .el-card{
    .addBtn{
      margin-bottom: 15px;
      background-color: #e15536;
      color: #fff;
    }
  }
  ::v-deep .el-dialog{
    width: 600px;
    border-radius: 8px;
    .el-dialog__header {
      border-radius: 8px;
      background-color: #f3f4f7;
      span{
        color: #000;
      }
    }
    .el-dialog__body {
      padding-right: 60px;
    }
  }
}
</style>
